<template>
  <div class="content-div">
    <div class="evaluate-div">
      <van-row type="flex">
        <van-col span="5">
          <img :src="evaluationInfo.head_sculpture" alt="">
        </van-col>
        <van-col span="12">
          <div class="flex row-between row-center line-height-div">{{evaluationInfo.nickname}}</div>
          <div class="flex row-between row-center line-height-div mt5" style="font-size:14px;">{{evaluationInfo.create_time}}</div>
        </van-col>
        <van-col span="7" class="flex row-between row-center">
           <div>
              <van-rate
                v-model="evaluationInfo.star"
                :size="13"
                allow-half
                readonly
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { getOrderEvaluation } from '@/api/medicalWaiter.js'
import Toast from 'vant'
export default {
  name: 'evaluate',
  data () {
    return {
      value: null,
      order_goods_id: this.$route.query.order_goods_id,
      evaluationInfo: {}
    }
  },
  computed: {},
  methods: {
    getOrderEvaluationData () {
      getOrderEvaluation({ order_goods_id: this.order_goods_id }).then(res => {
        if (res.data.errcode === 0) {
          this.evaluationInfo = res.data.data
          this.evaluationInfo.star = this.getStar(this.evaluationInfo.fraction)
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    getStar (value) {
      switch (value) {
        case 10:
          return 0.5
        case 20:
          return 1
        case 30:
          return 1.5
        case 40:
          return 2
        case 50:
          return 2.5
        case 60:
          return 3
        case 70:
          return 3.5
        case 80:
          return 4
        case 90:
          return 4.5
        case 100:
          return 5
        default:
          return ''
      }
    }
  },
  mounted () {
    this.getOrderEvaluationData()
  }
}
</script>
<style scoped lang="less">
  .content-div {
    padding: 8px 10px;
    background-color: #f2f3f7;
    min-height: 100%;
    .evaluate-div {
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;
      height: 55px;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50px;
      }
      .line-height-div {
        height: 20px;
      }
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .row-between {
      justify-content: space-between;
    }
    .mt5 {
      margin-top: 5px;
    }
  }
</style>
